<template>
  <div class="tabbar">
    <span @click="handleClick(index)" v-for="(item,index) in tablist" :key="index" :class="{
      iconfont:true,
      [item.icon]:true,
      active: currentIndex == index
    }">{{item.text}}</span>                                                                                 
  </div>
</template>

<script>
export default {
  data(){
    return {
      currentIndex:0, //用来保存点击的下标
      tablist:[
        { icon:'icon-home',text:'首页' },
        { icon:'icon-order',text:'订单' },
        { icon:'icon-mine',text:'我的' },
      ]
    }
  },
  methods:{
    handleClick(index){
      //保存点击的下标
      this.currentIndex = index;
    }
  }
}
</script>

<style scoped>
    .tabbar{
        background: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 15px 0;
        width: 100%;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        border-top: 1px solid #ccc;
    }
    .tabbar span.active{
      color: blue;
      font-weight: bold;
    }
</style>